<template>
  <view>
    <view v-if="dataList.length!==0">
      <view class="header">
        <view>富阳行政事业单位资产清查盘盈处置备案表</view>
      </view>
      <view class="container">
        <view style="display: flex;font-size: 10px;">
          <view style="flex:3">填报单位: {{ dataList[0].enterpriseName }}</view>
          <view style="flex:1;text-align: right;">金额:元 共1页</view>
        </view>
        <view class="tableWrap">
          <!--  -->
          <vxe-table
            :height="initHeight"
            :data="dataList"
            border
            resizable
            show-overflow
            style="width: 100%"
            show-footer-overflow
            show-footer
            :footer-method="footerMethod"
            :header-cell-style="{
              'font-size':'13px',
              'font-weight':'400',
              'background-color': 'rgb(64, 158, 255)',
              'color':'#fff',
              'text-align':'center',
              'line-height':'14px'
            }"
            :cell-style="{
              'text-align':'center',
              'font-size':'12px',
              'line-height':'14px'
            }"
          >
            <vxe-table-column fixed="left" type="seq" title="序号" width="40" />
            <vxe-table-column fixed="left" title="单位" width="110" field="enterpriseName" />
            <vxe-table-column field="name" title="盘盈资产名称及型号规格" width="100" />
            <vxe-table-column field="count" title="盘盈资产数量" width="100" />
            <vxe-table-column title="盘盈资产价值确定">
              <vxe-table-column field="originalValue" title="原始凭证价值" width="130" />
              <vxe-table-column field="sameProductValue" title="同类商品价值" width="130" />
              <vxe-table-column field="assessValue" title="评估价值" width="130" />
            </vxe-table-column>
            <vxe-table-column field="reason" title="分析说明资产盘盈原因" width="200" />
            <vxe-table-column field="remark" title="备注" width="150" />
          </vxe-table>

        </view>

      </view>
    </view>
    <view v-else style="text-align: center;">
      <image mode="aspectFit" style="height: 500px;width: 300px;" src="../../../../../static/img/loading.png" />
    </view>
  </view>
</template>

<script>
import XEUtils from 'xe-utils';
export default {
  props: {
    dataList: {
      type: Array,
      default: () => ([])
    }
  },
  data() {
    return {
      loading: false,
      tableData: [],
      initHeight: ''
    };
  },

  created() {
    this.initHeight = document.body.clientHeight - 180;
  },
  methods: {
    footerMethod({
      columns,
      data
    }) {
      const footerData = [
        columns.map((column, columnIndex) => {
          if (columnIndex === 0) {
            return '合计';
          } else {
            if (column.property === 'remark' || column.property === 'dutyReason' || column.property === 'reason' || column.property === 'name' || column.property === 'enterpriseName') {
              return '--';
            } else {
              return XEUtils.sum(data, column.property);
            }
          }
        })
      ];

      return footerData;
    }
  }

};
</script>

<style scoped lang='scss'>
	.tableWrap /deep/ .vxe-table .vxe-cell {
		white-space: pre-line;
		word-break: break-all;
		padding-left: 0px !important;
		padding-right: 0px !important;
	}

	.tableWrap /deep/ .vxe-table .vxe-header--column:not(.col--ellipsis) {
		padding: 5px 0;
		overflow-x: auto;
	}

	.header {
		text-align: center;
		text-align: center;
		font-size: 16px;
		margin-top: 5px;
	}

	.dateTitle {
		margin-top: 8px;
		font-size: 13px;
		color: gray;
	}

	.container {
		margin-top: 5px;
		padding: 5px 10px;
		background: #fff;
		margin: 8px 0px;
	}

	.tableWrap {
		margin-top: 10px;
	}
</style>
